<template>
  <view class="psychology-container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="back-btn" @click="goBack">‹</text>
      <text class="header-title">心理咨询</text>
    </view>

    <!-- 用户头像 -->
    <view class="user-section">
      <view class="user-avatar">
        <image src="/static/images/default-avatar.png" class="avatar" />
      </view>
      <view class="user-greeting">
        <text>您好！我现在专业的心理咨询专家，</text>
        <text>很高兴您能够到访，请问有什么可以为您</text>
        <text>帮助？</text>
      </view>
    </view>

    <!-- 咨询消息 -->
    <view class="chat-section">
      <view class="user-message">
        <view class="user-avatar-small">
          <image src="/static/images/default-avatar.png" class="avatar-small" />
        </view>
        <view class="message-bubble user-bubble">
          您好，医生。我想问，用药如何怎么帮助自己减轻
        </view>
      </view>

      <view class="doctor-message">
        <view class="doctor-avatar">
          <image src="/static/images/doctor-avatar.png" class="avatar-small" />
        </view>
        <view class="message-bubble doctor-bubble">
          您好，医生。我想你的情况我可以理解、现在也不该有太多的担心对于方案让我们一天...
        </view>
      </view>
    </view>

    <!-- 输入框 -->
    <view class="input-section">
      <view class="input-wrapper">
        <input 
          type="text" 
          placeholder="请输入您的问题..."
          class="message-input"
          v-model="messageText"
        />
        <text class="send-icon">📤</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PsychologyPage',
  data() {
    return {
      messageText: ''
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.psychology-container {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

// 顶部标题
.header {
  display: flex;
  align-items: center;
  padding: 40rpx 32rpx;
  background: white;
  position: relative;
}

.back-btn {
  font-size: 48rpx;
  color: #4CAF50;
  position: absolute;
  left: 32rpx;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
}

// 用户区域
.user-section {
  background: white;
  padding: 32rpx;
  text-align: center;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 24rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 60rpx;
}

.user-greeting {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

// 聊天区域
.chat-section {
  flex: 1;
  padding: 32rpx;
}

.user-message, .doctor-message {
  display: flex;
  margin-bottom: 32rpx;
}

.user-message {
  justify-content: flex-end;
}

.doctor-message {
  justify-content: flex-start;
}

.user-avatar-small, .doctor-avatar {
  width: 80rpx;
  height: 80rpx;
  margin: 0 16rpx;
}

.avatar-small {
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
}

.message-bubble {
  max-width: 480rpx;
  padding: 24rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.user-bubble {
  background: #e3f2fd;
  color: #333;
  border-bottom-right-radius: 8rpx;
}

.doctor-bubble {
  background: white;
  color: #333;
  border-bottom-left-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

// 输入区域
.input-section {
  background: white;
  padding: 24rpx 32rpx;
  border-top: 2rpx solid #f0f0f0;
}

.input-wrapper {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 25rpx;
  padding: 16rpx 24rpx;
}

.message-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  background: transparent;
  border: none;
}

.send-icon {
  font-size: 32rpx;
  color: #4CAF50;
}
</style>